<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :default-active="defaultActive"
    @select="onSelect"
  >
    <el-menu-item v-for="item in menus" :key="item.key" :index="item.key">
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute()
const defaultActive = ref('')

const menus = reactive([
  {
    name: "商品管理",
    key: "/goods",
  },
  {
    name: "地点管理",
    key: "/local",
  },
  {
    name: "标签管理",
    key: "/tags",
  },
  {
    name: "用户管理",
    key: "/users",
  },
]);

const onSelect = (arg) => {
  router.push({
    path: `/home${arg}`,
  });
};

onMounted(() => {
  if (route.path) {
    console.log(route.path.split('/home')[1])
    defaultActive.value = route.path.split('/home')[1]
  }
})
</script>
<style lang="scss" scoped>
.el-menu {
  min-height: 100%;
}
</style>
